<template>
	
	<div>
		
		<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
			<el-tab-pane :label="tab.all" name="first">
		
				<search-container @on-search="search"></search-container>
		
				<el-tree ref="carTree" :data="treeData" show-checkbox check-strictly node-key="id" :props="defaultProps"
					style="height: 61vh; overflow: auto;border: 1px solid lightgray;"  @check-change="handleNodeClick">
					<span slot-scope="{ node, data }" style="font-size: 12px;">
						<span v-if="data.type!=='car'">{{ node.label }}</span>
						<span v-if="data.type==='car'&&data.label.includes('离线')"
							style="color:#000">{{ node.label }}</span>
						<span v-if="data.type==='car'&&data.label.includes('从未上线')"
							style="color:#9A9A9A">{{ node.label }}</span>
						<span v-if="data.type==='car'&&data.label.includes('停车')"
							style="color:#F69B51">{{ node.label }}</span>
						<span v-if="data.type==='car'&&data.label.includes('熄火')"
							style="color:#F30635">{{ node.label }}</span>
						<span v-if="data.type==='car'&&data.label.includes('行驶')"
							style="color:#3D9B73">{{ node.label }}</span>
					</span>
		
				</el-tree>
		
		
		
				<div style="padding: 5px;display: flex;justify-content: space-around;">
					<div :style="{'background':run.selected}" @click="changeRun('run')">
						<img src="~@/assets/images/cljk/cl-run.png" alt="logo" width="30px" height="30px" />
					</div>
					<div :style="{'background':stop.selected}" @click="changeRun('stop')">
						<img src="~@/assets/images/cljk/cl-stop.png" alt="logo" width="30px" height="30px" />
					</div>
		
					<div :style="{'background':xh.selected}" @click="changeRun('xh')">
						<img src="~@/assets/images/cljk/cl-xh.png" alt="logo" width="30px" height="30px" />
					</div>
				</div>
		
			</el-tab-pane>
			<el-tab-pane :label="tab.online" name="second">
				
			</el-tab-pane>
			<el-tab-pane :label="tab.offline" name="third">
			
			</el-tab-pane>
		</el-tabs>
		
	</div>
	
	
</template>

<script>
	import {
		getCarOrgList
	} from '@/api/cljk.js';
	import {
		login_key
	} from '@/config/storage-keys';
	import searchContainer from '@/views/cljk-view/left/search-container.vue'
	export default {
		name: 'leftContent',
		components:{
			
			'search-container': searchContainer
			
		},
		
		
		data(){
			
			return{
				activeName: 'first',
				user: null,
				tab: {
					all: '全部(1000辆)',
					online: '在线(1000辆)',
					offline: '离线(1000辆)',
				},
				init: true,
				searchParam: {
					userId: null,
					searchType: 0,
					onlineType: 0,
					videoType: 0,
					connectType: 0,
					runType: 0,
					syxz: null,
					searchKey: null,
				},
				treeData:[],
				run: {
					selected: null,
					num: 0
				},
				stop: {
					selected: null,
					num: 0
				},
				xh: {
					selected: null,
					num: 0
				},
				defaultProps: {
					children: 'children',
					label: 'label'
				},
				checkedId: '',
			}
			
			
			
		},
		methods:{
			search(p) {
				this.init = false
				var {
					videoType,
					connectType,
					searchType,
					searchKey,
					syxz
				} = p
			
				this.searchParam.videoType = videoType
				this.searchParam.connectType = connectType
				this.searchParam.searchType = searchType
				this.searchParam.searchKey = searchKey
				this.searchParam.syxz = syxz
				this.searchList()
			},
			handleNodeClick(data, checked, node) {
			    if(checked === true) {
			        this.checkedId = data.id;
					this.$emit('on-selected',data)
			        this.$refs.carTree.setCheckedKeys([data.id]);
			    } else {
			        if (this.checkedId == data.id) {
						this.$emit('on-selected',data)
			            this.$refs.carTree.setCheckedKeys([data.id]);
			        }
			    }
			},
			
			handleClick(tab, event) {
				if (this.activeName === 'first') {
					this.searchParam.onlineType = 0
				} else if (this.activeName === 'second') {
					this.searchParam.onlineType = 1
				} else if (this.activeName === 'third') {
					this.searchParam.onlineType = 2
				}
				this.init = false
				this.searchList()
			},
			
			searchList(){
				this.searchParam.userId = this.user.id
				getCarOrgList(this.searchParam).then(res => {
					if (res.code === 200) {
						if (this.init) {
							this.tab.all = '全部(' + res.data.total + '辆)'
							this.tab.online = '在线(' + res.data.online + '辆)'
							this.tab.offline = '离线(' + res.data.offline + '辆)'
						}
				
						this.treeData = res.data.data
				
					}
				}).catch(err => {
					console.log(err)
				})
			},
			changeRun(type) {
				if (type === 'run') {
					this.stop = {
						selected: null,
						num: 0
					}
					this.xh = {
						selected: null,
						num: 0
					}
					this.run.num++;
					if (this.run.num % 2 !== 0) {
						this.run.selected = '#409EFF'
						this.searchParam.runType = 2
						this.searchList()
					} else {
						this.run.selected = null
						this.searchParam.runType = 0
						this.searchList()
					}
			
				}
			
				if (type === 'stop') {
					this.run = {
						selected: null,
						num: 0
					}
					this.xh = {
						selected: null,
						num: 0
					}
					this.stop.num++;
					if (this.stop.num % 2 !== 0) {
						this.stop.selected = '#409EFF'
						this.searchParam.runType = 3
						this.searchList()
					} else {
						this.stop.selected = null
						this.searchParam.runType = 0
						this.searchList()
					}
			
				}
			
				if (type === 'xh') {
					this.run = {
						selected: null,
						num: 0
					}
					this.stop = {
						selected: null,
						num: 0
					}
					this.xh.num++;
					if (this.xh.num % 2 !== 0) {
						this.xh.selected = '#409EFF'
						this.searchParam.runType = 4
						this.searchList()
					} else {
						this.xh.selected = null
						this.searchParam.runType = 0
						this.searchList()
					}
			
				}
			
			
			},
		},
		mounted(){
			this.user = this.$Storage.getLocalStorage(login_key)
			this.searchList()
		}
		
	}
	
	
	
</script>

<style>
</style>